<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>搜索详情</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/getParameter.js"></script>

<script>
	$(function() {
		//查询用户信息
		$("#u_inf").hide();
		$("#logout").hide();
		$('#mm').hide();
		$.get("./fillServlet", {}, function(data) {
			//{uid:1,name:'李四'}
			if (data != null && data.length != 0) {
				$("#reg").hide();
				$("#u_inf").show();
				$("#logout").show();
				$("#u_inf").text("欢迎," + data.username);
			} else {
				$("#reg").show();
			}
		});
		
		var keyword =  getParameter('keyword');
		var currentpage = getParameter('currentpage');
		$.get("./searchServlet",{keyword:keyword,currentpage:currentpage},function(pb){
			if(pb==null||pb.length==0||pb.list.length==null||pb.list.length==0){
				$('#mm').show();
				$('#tt').hide();
				$("#page").hide();
			}
			var keyword =  getParameter('keyword');
			var currentpage = getParameter('currentpage');
			if(currentpage==null)
				currentpage=0;
			var li = '';
			for(var i = 0;i < pb.list.length;i++){
				var div = '<div class="container" id="list">'
						+'<div class="row">'
							+'<div class="col-sm-5">'
								+'<img id="img1" src="'+pb.list[i].img1+'">'
							+'</div>'
							+'<div class="col-sm-6">'
								+'<div class="row">'
									+'<a href="./detailed.html?foodid='+pb.list[i].foodid+'"><h3>'+pb.list[i].dname+'</h3></a>'
								+'</div>'
								+'<div class="row">'
									+'<p>'+pb.list[i].detial+'</p>'
								+'</div>'
							  +'</div>'
							+'</div>'
						+'</div>';
				li += div;
			}
			$("#dataa").html(li);
			$("#count span").text(pb.count);
			
		    /*
		    <ul class="pagination pagination-lg">
				<li><a href="#" aria-label="Previous"> <span
						aria-hidden="true">&laquo;</span>
				</a></li>
				<li class="active"><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span>
				</a></li>
			</ul>
		    */
		    var pages = '';
		    if(currentpage==0)
		    	pages += '<li class="disabled"><a href="#" aria-label="Previous"> <span'
						+'aria-hidden="true">&laquo;</span>'
				+'</a></li>';
				else 
				pages += '<li><a href="./searchlist.html?keyword='+keyword+'&currentpage='+(Number(currentpage)-1)+'" aria-label="Previous"> <span'
					+'aria-hidden="true">&laquo;</span>'
					+'</a></li>';
			for(var j=0 ;j<pb.pageCount;j++){
				var da='';
				if(j==currentpage)
					pages += '<li class="active" ><a href="./searchlist.html?keyword='+keyword+'&currentpage='+j+'" >'+(j+1)+'</a></li>';
				else
				da = '<li><a href="./searchlist.html?keyword='+keyword+'&currentpage='+j+'">'+(j+1)+'</a></li>';
				pages += da;
			}
			
		  	if(currentpage==pb.pageCount-1)
		  		pages += '<li class="disabled"><a href="#" aria-label="Next"> <span'
							+'aria-hidden="true">&raquo;</span>'
					+'</a></li>';
					else
					pages += '<li><a href="./searchlist.html?keyword='+keyword+'&currentpage='+(Number(currentpage)+1)+'" aria-label="Next"> <span'
								+'aria-hidden="true">&raquo;</span>'
						+'</a></li>';
		   $("#page0").html(pages);
					
		});
	});
	
	
	</script>


<style type="text/css">
#first {
	border: gray 2px solid;
	background: url("./img/header_bg.jpg") no-repeat;
	background-size: 100%;
	height: 120px;
	border-radius: 10px;
}

#p1 {
	color: #D3D3D3;
	font-style: oblique;
	font-size: 40px;
	font-family: "华文琥珀";
	margin-top: 28px;
	margin-left: 40px;
	float: left;
}

#p2 {
	color: black;
	font-size: 25px;
	font-family: "仿宋";
	padding-top: 45px;
	margin-left: 480px;
}

#word {
	width: 80px;
	height: 80px;
}

#xx {
	width: 75px;
	height: 105px;
}

.footer {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 20px;
}

#list {
	background: #F8F8FF;
	border-radius: 10px;
	margin-top: 20px;
}

#img1 {
	height: 242px;
	width: 400px;
	border-radius: 10px;
	margin: 15px 0 15px 10px;
}

#list a {
	color: black;
	font-size: 20px;
	font-family: "宋体";
	font-style: oblique;
	display: inline-block;
	margin: 20px 0 0 10px;
}

#list p {
	color: gray;
	width: 500px;
	font-size: 16px;
	display: inline-block;
	margin: 10px 0 0 10px;
	display: inline-block;
}

#page{
	margin: 20px 0 0 600px;
}

#mm{
	text-align: center;
}


</style>

</head>


<body>
	<div class="container-fluid">
		<div class="row" id="first"></div>
		<div class="row">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
							data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span> <span
								class="icon-bar"></span> <span class="icon-bar"></span> <span
								class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="./index.html">首页</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="./collection.html">我的收藏 <span
									class="sr-only">(current)</span></a></li>
						</ul>
						<form class="navbar-form navbar-right" role="search" action="./searchlist.html">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="关键词搜索"  name="keyword">
								<input name="currentpage" value=0 style="display: none;">
							</div>
							<input type="submit" id="sss" value="搜索"  class="btn btn-default ">
						</form>
						<ul class="nav navbar-nav navbar-right">
							<li><a href="./register.html">注册</a></li>
							<li><a id=u_inf></a></li>
							<li id=reg><a href="./Login.jsp">登录</a></li>
							<li id=logout><a
								href="javascript:location.href='userLogoutServlet';">退出登录</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</div>

      <div class="container">
		<div class="row" id="daohang">
			<ol class="breadcrumb">
				<li><a href="./first.html">首页</a></li>
				<li>搜索详情</li>
			</ol>
		</div>
		<div class="row" id="tt"><h2>为您找到如下结果:</h2><h3 id="count">共<span></span>条记录</h3></div>
		<div class="row" id="mm"><h2>暂无搜索结果</h2></div>
		</div>

	<div id="dataa">
	</div>
	
	<div class="container" id="page">
		<nav>
			<ul class="pagination pagination-lg" id="page0">
				<li><a href="#" aria-label="Previous"> <span
						aria-hidden="true">&laquo;</span>
				</a></li>
				<li class="active"><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span>
				</a></li>
			</ul>
		</nav>
	</div>

	<div class="footer">
		<hr>
		Copyright © 2020, <a href="./index.html">&#160&#160嗣食肆&#160</a>&#160All
		Rights Reserved
	</div>
</body>
</html>